<template>
    <li class="nav-item p-2" v-cloak>
        <button type="button" id="navbar-request-button" class="btn btn-success btn-sm" @click="showRequestModal" :aria-label="$t('New Request')" aria-haspopup="dialog">
            <i class="fas fa-plus"></i>
            {{$t('Request')}}
        </button>
        <b-modal size="lg"
                 id="requests-modal"
                 class="requests-modal modal-dialog-scrollable"
                 ref="requestModalAdd"
                 :title="$t('New Request')"
                 header-close-content="&times;"
                 hide-footer>
            <b-row no-gutters>
                <b-col cols="8">
                    <p>{{ $t("We've made it easy for you to start a Request for the following Processes. Select a Process to start your Request.") }}</p>
                </b-col>
                <b-col cols="4">
                    <b-input-group>
                        <b-form-input v-model="filter" :placeholder="$t('Search') + '...'"></b-form-input>
                        <b-input-group-append>
                            <button type="button" class="btn btn-primary" :aria-label="$t('Search')"><i class="fas fa-search"></i></button>
                        </b-input-group-append>
                    </b-input-group>
                </b-col>
            </b-row>

            <div v-if="Object.keys(processes).length && !loading" class="process-list">
                <div v-for="(category, index) in processes" class="mt-3">
                    <h5 class="mb-n2">
                        {{index}}
                        <span class="badge badge-pill badge-secondary">{{category.length}}</span>
                    </h5>
                    <template v-for="(process,index) in category">
                      <process-card v-if="hasEmptyStartEvents(process)"
                                    :filter="filter"
                                    :key="index"
                                    :process="process">
                      </process-card>
                    </template>
                </div>
            </div>

            <div class="no-requests my-3 text-center" v-if="!Object.keys(processes).length && !loading">
                <h4>{{ $t('You don\'t have any Processes.') }}</h4>
                <span v-if="permission.includes('create-processes')">
                    <a :href="url" class="text-primary">{{ $t('Please visit the Processes page') }}</a>
                    {{ $t('and click on +Process to get started.') }}
                </span>
                <span v-else>{{ $t('Please contact your administrator to get started.') }}</span>
            </div>

            <div v-if="loading" class="loading no-requests my-3 text-center">
                <div class="icon-container">
                    <div>
                        <svg class="lds-gear" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(50 50)">
                        <g transform="rotate(248.825)">
                        <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="4.7s" repeatCount="indefinite"></animateTransform><path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20"></path></g></g></svg>
                    </div>
                </div>
                <h4>{{ $t('Finding Requests available to you...') }}</h4>
            </div>

            <pagination :single="$t('Process')"
                        :plural="$t('Processes')"
                        :perPageSelectEnabled="true"
                        @changePerPage="changePerPage"
                        @vuetable-pagination:change-page="onPageChange"
                        ref="listProcess">
            </pagination>

        </b-modal>
    </li>
</template>

<script>
  import card from "./card";
  import datatableMixin from "../common/mixins/datatable";

  export default {
    mixins: [datatableMixin],
    props: {
      permission: Array,
      url: ''
    },
    components: {
      "process-card": card
    },
    data() {
      return {
        filter: "",
        loading: false,
        error: false,
        loaded: false,
        processes: {
          // Blank
        }
      };
    },
    methods: {
      hasEmptyStartEvents(process) {
        return !!process.events.find(event => !event.eventDefinitions || event.eventDefinitions.length === 0);
      },
      showRequestModal() {
        this.loaded = true;
        // Perform initial load of requests from backend
        this.$refs.requestModalAdd.show();
        this.fetch();
      },
      // Overwrite handler to change the page based on events fired
      onPageChange: function onPageChange(page) {
        if (page === "next") {
          this.page++;
        } else if (page === "prev") {
          this.page--;
        } else {
          this.page = page;
        }
        if (this.page <= 0) {
          this.page = 1;
        }
        if (this.page > this.$refs.listProcess.tablePagination.last_page) {
          this.page = this.$refs.listProcess.tablePagination.last_page;
        }
        this.fetch();
      },
      fetch() {
        if (!this.loaded) {
          return;
        }
        this.loading = true;
        // Now call our api
        window.ProcessMaker.apiClient
          .get(
            "start_processes?page=" +
            this.page +
            "&per_page=" +
            this.perPage +
            "&filter=" +
            this.filter +
            "&order_by=category.name,name" +
            "&order_direction=asc,asc" +
            "&include=events,categories" +
            "&without_event_definitions=true"
          )
          .then(response => {
            let data = response.data;
            // Empty processes
            this.processes = {};
            // Now populate our processes array with data for rendering
            this.populate(data.data);
            // Do initial filter
            this.loading = false;
            //Set data in paginate
            data.meta.from--;
            this.$refs.listProcess.data = data;
            this.$refs.listProcess.setPaginationData(data.meta);
          })
          .catch(error => {
            this.loading = false;
            this.error = true;
          });
      },
      populate(data) {
        // Each element in data represents an individual process
        // We need to pull out the category name, and if it's available in our processes, append it there
        // if not, create the category in our processes array and then append it
        for (let process of data) {
          for (let category of process.categories) {
            // Now determine if we have it defined in our processes list
            if (typeof this.processes[category.name] == "undefined") {
              // Create it
              this.processes[category.name] = [];
            }
            // Now append
            this.processes[category.name].push(process);
          }
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
    .icon-container {
        display:inline-block;
        width: 5em;
        margin-bottom: 1em;

        i {
            color: #b7bfc5;
            font-size: 5em;
        }

        svg {
            fill: #b7bfc5;
        }
    }
</style>
